<template>
  <div class="tableControl clickTC">
    <a-popover trigger="hover">
      <template #content>
        <div>全屏</div>
      </template>
      <span @click="onClickFullScreen">
        <FullscreenExitOutlined v-if="isFullScreen" class="cursor-pointer mediumTitleTS" />
        <FullscreenOutlined v-else class="cursor-pointer mediumTitleTS" />
      </span>
    </a-popover>
    <a-popover trigger="hover">
      <template #content>
        <div>密度</div>
      </template>
      <a-popover
        trigger="click"
        placement="left"
        arrow-point-at-center
        :get-popup-container="(triggerNode: any) => triggerNode.parentNode"
      >
        <template #content>
          <a-menu :selected-keys="[density]" @click="onClickDensity">
            <a-menu-item v-for="e in Object.keys(SIZEMAP)" :key="e">
              {{ SIZEMAP[e as SIZEMAP_KEY].title }}
            </a-menu-item>
          </a-menu>
        </template>
        <column-height-outlined class="cursor-pointer mediumTitleTS" />
      </a-popover>
    </a-popover>

    <a-popover trigger="hover">
      <template #content>
        <div>列设置</div>
      </template>
      <a-popover trigger="click" placement="left" :get-popup-container="(triggerNode: any) => triggerNode.parentNode">
        <template #content>
          <div class="ml-[20px]">
            <a-checkbox
              v-model:checked="tableColState.checkAll"
              :indeterminate="tableColState.indeterminate"
              @change="onChangeCheckAll"
            >
              全选
            </a-checkbox>
          </div>
          <a-divider />
          <VueDraggable v-model="_tableOption">
            <div v-for="item in _tableOption" :key="item.title" class="drag-item">
              <HolderOutlined />
              <a-checkbox v-model:checked="item.show" @change="onChangeCheck">{{ item.title }}</a-checkbox>
            </div>
          </VueDraggable>
          <a-divider :margin="6" />
          <a-button class="reset-btn" type="primary" size="mini" @click="onResetTableColState">
            <template #icon><RedoOutlined /></template>
            <template #default>重置</template>
          </a-button>
        </template>
        <setting-outlined class="setting cursor-pointer mediumTitleTS" />
      </a-popover>
    </a-popover>
  </div>
</template>

<script setup lang="ts">
import { computed, nextTick, reactive, ref } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'
import { SIZEMAP } from './option'

import type { ThOption } from './option'

/**
 * 组件定义
 * */
type SIZEMAP_KEY = keyof typeof SIZEMAP
interface TableControlOption {
  tableOption: ThOption[] // 表格配置数据 v-model
  density: SIZEMAP_KEY // 密度
}
interface TableControlEmit {
  (e: 'changeDensity', item: SIZEMAP_KEY): void
  (e: 'changeTableCol', value?: ThOption[]): void
  (e: 'update:tableOption', value: ThOption[]): void
}
const props = withDefaults(defineProps<TableControlOption>(), {})
const emit = defineEmits<TableControlEmit>()

/**
 * 排序功能
 * */
const _tableOption = computed({
  get() {
    return props.tableOption
  },
  set(value) {
    emit('update:tableOption', value)
  }
})
const onResetTableColState = () => {
  _tableOption.value = JSON.parse(JSON.stringify(ORIGIN_TABLE_OPTION))
  nextTick(() => onChangeCheck())
}

/**
 * 密度功能
 * */
const onClickDensity = ({ key }: { key: SIZEMAP_KEY }) => {
  emit('changeDensity', key)
}

/**
 * 表设置集合
 * */
const ORIGIN_TABLE_OPTION = JSON.parse(JSON.stringify(_tableOption.value))
const tableColState = reactive({
  indeterminate: false, // 半选状态
  checkAll: true // 选择状态
})

// 选择框功能
const onChangeCheckAll = (e: any) => {
  _tableOption.value.forEach(_x => (_x.show = e.target.checked))
  tableColState.indeterminate = false
  emit('changeTableCol', _tableOption.value)
}
const onChangeCheck = () => {
  const checkedCount = _tableOption.value.filter(_x => _x.show)?.length
  const totalCount = _tableOption.value.length
  tableColState.checkAll = checkedCount === totalCount
  tableColState.indeterminate = !!checkedCount && checkedCount < totalCount
  emit('changeTableCol', _tableOption.value)
}
/**
 * 全屏
 * TODO 细节待开发
 * */
const isFullScreen = ref(false)
const onClickFullScreen = () => {
  isFullScreen.value = !isFullScreen.value
  if (isFullScreen.value) {
    document.documentElement.requestFullscreen()
  } else {
    document.exitFullscreen()
  }
}
</script>

<style lang="scss" scoped>
.tableControl {
  position: absolute;
  // right: 3.3%;
  right: 0;
  top: -35px;
  color: #006ab2;
  .setting {
    margin-top: 10px;
  }
  :deep(.ant-popover-inner-content) {
    padding: 10px;
  }
  :deep(.ant-menu-vertical) {
    border: none;
  }
  :deep(.ant-divider-horizontal) {
    margin: 2px;
  }
  :deep(.ant-checkbox-group-item) {
    display: flex;
  }
  .anticon {
    margin-right: 6px;
  }
  .drag-item {
    display: flex;
    align-items: center;
  }
  .reset-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
